<template>
  <div>
    <van-grid square clickable icon-size="40">
      <van-grid-item
        v-for="(item, index) in menus"
        :key="index"
        :icon="item.icon"
        :icon-color="item.color"
      >
        <template #text>
          <div class="text-sm mt-1" :style="{ color: item.color }">
            {{ item.name }}
          </div>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { Grid, GridItem } from "vant";
import { ref } from "@vue/reactivity";
const menus = ref([
  { name: "学习", icon: "cluster", color: "#409EFF" },
  { name: "自律", icon: "vip-card", color: "#9145DD" },
  { name: "交友", icon: "like", color: "#FF3EC9" },
  { name: "更多", icon: "shop-collect", color: "#08F7E7" },
]);
</script>

<style lang="scss" scoped>
</style>